<template>
  <span v-if="item.type === 'button'">
    <template v-for="(buttonItem, index) in item.buttons">
      <el-button
        v-if="!(buttonItem.hidden && buttonItem.hidden(scope.row, item.prop))"
        v-bind="buttonItem"
        :key="index"
        :type="buttonItem.type || 'primary'"
        :class="buttonItem.class"
        :disabled="buttonItem.disable && buttonItem.disable(scope.row, item.prop)"
        @click="buttonItem.event && handlerEvent(buttonItem.event, scope.row, item.prop)"
      >
        {{ buttonItem.name }}
      </el-button>
    </template>
  </span>
  <span v-else-if="item.type === 'switch'">
    <el-switch
      v-bind="item"
      v-model="scope.row[item.prop]"
      :disabled="item.disable && item.disable(scope.row, item.prop)"
      @change="(status) => item.event && item.event(status, scope.row, item.prop)"
    ></el-switch>
  </span>
  <span v-else-if="item.type === 'popover'">
    <el-popover
      v-bind="item.rfpopover"
      :title="item.handleTitle ? item.handleTitle(scope.row, item.prop) : item.title"
      :content="item.handleContent ? item.handleContent(scope.row, item.prop) : item.content"
    >
      <template #reference>
        <el-button link type="primary">{{ item.name }}</el-button>
      </template>
    </el-popover>
  </span>
  <span v-else-if="item.type === 'dropdown'">
    <el-dropdown
      v-bind="item.dropdown"
      :placement="(item.dropdown && item.dropdown.placement) || 'bottom'"
      :trigger="(item.dropdown && item.dropdown.trigger) || 'click'"
      @command="(arg) => item.handleCommand && item.handleCommand(arg)"
      :disabled="item.disable && item.disable(scope.row, item.prop)"
    >
      <el-button link type="primary">{{ item.name }}</el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(value, index) in scope.row[item.prop] || []"
          :key="index"
          :command="value"
          v-bind="item.dropdownItem"
          >{{ value[item.tag] || value }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </span>
  <!-- 文字 -->
  <span
    v-else
    :style="item.handlerStyle && item.handlerStyle(scope.row)"
    :class="[
      { 'has-event is-event link': item.event },
      typeof item.class === 'function' ? item.class(scope.row) : item.class
    ]"
    @click="item.event && handlerEvent(item.event, scope.row, item.prop)"
  >
    {{ item.filter ? item.filter(scope.row, scope.row[item.prop]) : scope.row[item.prop] }}
  </span>
</template>
<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  scope: {
    type: Object,
    default: () => ({ row: {} })
  }
})
const emits = defineEmits(['handlerEvent'])
const handlerEvent = (event, row, currItemKey) => {
  emits('handlerEvent', event, row, currItemKey, props.scope)
}
</script>
<style scoped></style>
